<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反转字符串</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>

    <!-- 
        计算属性：
            1.什么是计算属性
                使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性
                    Vue的原有属性：data对象当中的属性可以叫做Vue的原有属性
                    全新的属性：表示生成了一个新的属性，和data中的属性无关了，新的属性也有自己的属性名和属性值
            2.计算属性怎么使用
                语法格式：需要一个新的配置项 computed
                    computde: {
                        //这是一个计算属性
                        计算属性1：{
                            //getter和setter方法

                            //第一个时机：第一次访问这个属性的时候
                            //第二个时机：该计算属性所关联的Vue原有属性的值发生变化时，getter方法会被重新调用一次（计算属性会和data的属性进行计算，而data的属性发生变更）
                            get() {
                            
                            },
                            //当修改计算属性1的时候，setter方法被自动调用
                            set(val) {

                            }

                        }。
                         //这是另一个计算属性
                        计算属性2：{}。
                    }
            3.计算属性的作用
                代码得到了复用
                代码更加便于维护了
                代码的执行效率高了

    -->

    <!-- 准备一个容器 -->
    <div id="app">
        <h1>{{msg}}</h1>
        输入的信息：<input type='text' v-model="info" /> <br />

        <!-- 
            三个问题：
                1.可读性差
                2.代码复用性差
                3.难以维护
        -->
        反转的信息：{{info.split('').reverse().join('')}} <br />

        <!-- 在插值语法中可以调用方法，小括号不能省略。这个方法需要是Vue实例所管理的。 -->
        <!-- 此种方式，存在效率问题。有多少个就需要掉多少次方法 -->
        反转的信息：{{reverseInfo()}} <br />


        <!-- 计算属性进行反转 -->
        反转的信息：{{reversedInfo}} <br />
        <!-- 存在缓存：只会执行一次 -->
        反转的信息：{{reversedInfo}} <br />
    </div>

    <script>

        //自定义键值, .huiche => 表示回车键 enter
        Vue.config.keyCodes.huiche = 13

        const vm = new Vue({
            el: '#app',
            data: {
                msg: '计算属性-反转字符串',
                info: ''
            },
            methods: {
                reverseInfo() {
                    return this.info.split('').reverse().join('')
                }
            },
            //计算属性
            computed: {
                //完整写法
                reversedInfo: {
                    get() {
                        console.log('字符串反转')
                        return this.info.split('').reverse().join('')
                    },
                    set(val) {
                        console.log('setter方法被调用了');

                        //不能这样做，就递归了
                        // this.reversedInfo = val

                        //怎么修改计算属性呢？原理：计算属性的值变还是不变，取决于计算属性关联的Vue原始属性的值
                        //也就是说：reversedInfo变还是不变，取决于info属性的值变不变
                        //本质上：修改计算属性，实际上就是通过修改Vue的原始属性来实现的
                        this.info = val
                    }
                },
                //简写形式（前提：setter不需要的时候）
                // reversedInfo() {
                //     return this.info.split('').reverse().join('')
                // }
            }
        })

    </script>


</body>


</html>